<template>
  <div class='container'>
    <el-card class="box-card">
      <div class="instructions">
        <div>说明： 目前支持学科和关键字条件筛选</div>
        <el-button type="success" @click="onChangeNewView"><i class="el-icon-edit"></i>新增试题</el-button>
      </div>
      <el-form :model="questionFromData">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" label-width="100px">
              <el-select v-model="questionFromData.subject" placeholder="请选择" @change="onChangeSubject"  style="width:140%">
                <el-option v-for="(subject, i) in subjectList.data" :key="i" :label="subject.label" :value="subject.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" label-width="100px">
              <el-select v-model="questionFromData.simple" collapse-tags style="width:140%" placeholder="请选择">
                <el-option v-for="(simple, i) in simpleList.data" :key="i" :label="simple.label" :value="simple.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" label-width="100px">
              <el-select v-model="questionFromData.tags" collapse-tags style="width:140%" placeholder="请选择">
                <el-option v-for="(tag, i) in tagList.data" :key="i" :label="tag.label" :value="tag.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" label-width="100px">
               <el-input v-model="questionFromData.shortName" style="width:150%" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" label-width="100px">
              <el-select v-model="questionFromData.questionType" placeholder="请选择" @change="companyCity" style="width:140%">
                <el-option v-for="(questionType, i) in questionTypes" :key="i" :label="questionType.name" :value="questionType.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" label-width="100px">
              <el-select v-model="questionFromData.difficulty" collapse-tags style="width:140%" placeholder="请选择">
                <el-option v-for="(difficulty, i) in difficultys" :key="i" :label="difficulty.name" :value="difficulty.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" label-width="100px">
              <el-select v-model="questionFromData.direction" collapse-tags style="width:140%" placeholder="请选择">
                <el-option v-for="(direction, i) in directions" :key="i" :label="direction" :value="direction" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" label-width="100px">
              <el-select v-model="questionFromData.city" collapse-tags style="width:140%" placeholder="请选择">
                <el-option v-for="(item, i) in creator" :key="i" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" label-width="100px" >
              <el-input v-model="questionFromData.shortName" style="width:150%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" label-width="100px">
              <el-input v-model="questionFromData.shortName" style="width:150%" />
            </el-form-item>
            </el-col>
          <el-col :span="6">
            <el-form-item label="城市" label-width="100px">
              <el-select v-model="questionFromData.province" placeholder="请选择" @change="companyCity" style="width:47%">
                <el-option v-for="(province, i) in provinces" :key="i" :label="province" :value="province" />
              </el-select>
              <el-select v-model="questionFromData.city" collapse-tags style="margin-left:8px; width:47% " placeholder="请选择">
                <el-option v-for="(city, i) in companyCitys" :key="i" :label="city" :value="city" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="btn"  label-width="250px">
              <el-button @click="clearStatus">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="counts"><i class="el-icon-info"></i> 数据一共 {{ questionList.data.counts }} 条</div>

      <my-table
          :table-props="{
            data: questionList.data.items,
            border: false
          }"
          :columns="[
            { label: '试题编号', prop: 'number', width: 180, align: 'center' },
            { label: '学科', prop: 'subject', align: 'center' },
            { label: '目录', prop: 'catalog', align: 'center' },
            // { label: '题型', prop: 'questionType', align: 'center' },
            { label: '题型', slotName: 'questionType', align: 'center' },
            { label: '题干', slotName: 'question', align: 'center' },
            { label: '录入时间', slotName: 'addDate', align: 'center' },
            { label: '难度', slotName: 'difficulty', align: 'center' },
            { label: '录入人', prop: 'creator', align: 'center' },
            { label: '操作', slotName: 'operators', width: 450, align: 'center', fixed: 'right' },
          ]"
          :pagination-props="{
            layout: 'total, ->, prev, pager, next, sizes, jumper',
            total: questionList.data.counts
          }"
          :pagination-events="events"
        >
          <template v-slot:questionType="scope">
            {{scope.row.questionType == 1 ? '单选': (scope.row.questionType == 2? '多选': '简答')}}
          </template>
          <template v-slot:addDate="scope">
            <div>{{ getTimeString(scope.row.addDate) }}</div>
          </template>
          <template v-slot:difficulty="scope">
            {{scope.row.difficulty == 1 ? '简单': (scope.row.difficulty == 2? '一般': '困难')}}
          </template>
          <template v-slot:question="scope">
            <div v-html="scope.row.question"></div>
          </template>
          <template v-slot:operators="scope">
            <el-button type="primary" size="small" @click="onViewClick(scope.row)" circle plain><i class="el-icon-view" /></el-button>
            <el-button type="success" size="small" @click="onEditCompany(scope.row)" circle plain><i class="el-icon-edit" /></el-button>
            <el-button type="danger" size="small" @click="onDelClick(scope.row)" circle plain><i class="el-icon-delete" /></el-button>
            <el-button type="warning" size="small" @click="onCheckClick(scope.row)" circle plain><i class="el-icon-check" /></el-button>
          </template>
      </my-table>
    </el-card>
    <!-- 预览弹框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="questionVisible"
      @close="onViewClose"
    >
      <div class="question-container">
        <div>
          <span>【题型】：</span>
          <span>{{ questionDatail.questionType == 1 ? '单选题': (questionDatail.questionType == 2 ? '多选题' : '简答')}}</span>
        </div>
        <div>
          <span>【编号】：</span>
          <span>{{ questionDatail.id }}</span>
        </div>
        <div>
          <span>【难度】：</span>
          <span>{{ questionDatail.difficulty == 1 ? '简单' : ( questionDatail.difficulty == 2 ? '一般' : '困难')}}</span>
        </div>
        <div>
          <span>【标签】：</span>
          <span>{{ questionDatail.tags }}</span>
        </div>
        <div>
          <span>【学科】：</span>
          <span>{{ questionDatail.subjectName }}</span>
        </div>
        <div>
          <span>【目录】：</span>
          <span>{{ questionDatail.directoryName}}</span>
        </div>
        <div>
          <span>【方向】：</span>
          <span>{{ questionDatail.direction }}</span>
        </div>
      </div>
      <div class="answer">【题干】：</div>
      <div v-html="questionDatail.answer"></div>
<!--      选项-->
<!--      <div class="question-type">-->
<!--        <div>{{ questionDatail.questionType == 1 ? '单选题': (questionDatail.questionType == 2 ? '多选题' : '简答')}} 选项： (以下选中的选项为正确答案)</div>-->
<!--        <div v-for="item in questionDatail.options" :key="item.id">-->
<!--          <input :type="questionDatail.questionType == 1 ? 'radio': (questionDatail.questionType == 2 ? 'checkbox' : 'textarea')" :checked="item.isRight == 1 ? 'checked' : ''" :disabled="item.isRight !== 1 ? 'disabled' : ''"> {{ item.title}}-->
<!--        </div>-->
<!--      </div>-->
      <el-form :model="questionFromData" class="question-type">
        <el-form-item  v-if="questionFromData.questionType != 3" label="选项:" required>
          <div v-for="item in questionFromData.options" :key="item.code">
            <div><el-radio v-if="questionFromData.questionType == 1" v-model="questionFromData.optionCode" :label="item.code">{{ item.code}}:</el-radio></div>
            <div><el-checkbox v-if="questionFromData.questionType == 2" v-model="questionFromData.optionCodes" :label="item.code">{{ item.code}}:</el-checkbox></div>
          </div>
        </el-form-item>
      </el-form>

      <div class="refer-answer">【参考答案】：<el-button type="danger">视频答案预览</el-button></div>
      <div class="answer-parsing">
        <div>【答案解析】: </div>
        <div v-html="questionDatail.answer"></div>
      </div>
      <div class="note">【题目备注】: {{ questionDatail.remarks }}</div>
      <div class="dialog-footer">
        <el-button @click="onViewClose" type="primary">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { provinces, citys } from '@/api/hmmm/citys'
import { direction } from '@/api/hmmm/constants'
import * as questionApi from '@/api/hmmm/questions'
import { delModule } from '@/store/utils/delUtils'
import { getTimeString } from '@/utils/time'


export default {
  name: 'QuestionList',
  data() {
    return {
      getTimeString,
      dengmiQueryForm: {},
      currentPage: {
        page: 1,
        pagesize: 10
      },
      events: {
        'current-change': this.onCurrentPageChange
      },
      questionFromData: {
        addData: '', //录入时间
        catalog: '', // 目录
        city: '',
        creator: '', // 录入人
        difficulty: '', // 难度
        subject: '', // 学科
        simple: '',
        number: '',// 试题编号
        question: '', // 题干
        questionType: '', // 题型
        tags: '', // 标签
        direction: '', // 方向
        province: '',
        options: [
          { isRight: 0, code: 'A', title: '', img: '' },
          { isRight: 0, code: 'B', title: '', img: '' },
          { isRight: 0, code: 'C', title: '', img: '' },
          { isRight: 0, code: 'D', title: '', img: '' }
        ],
        optionCode: '',
        optionCodes: []
      },
      provinces: provinces(),
      citys: [],
      directions: direction,
      companyCitys: [],
      creator: ['超级管理员'],
      questionTypes: [
        {name: '单选', value: 1},
        {name: '多选', value: 2},
        {name: '简答', value: 3}
      ],
      difficultys: [
        {name: '简单', value: 1},
        {name: '一般', value: 2},
        {name: '困难', value: 3}
      ],
      companyShow: false,
      companyEditTitle: "",
      questionType: '',

      // 预览弹窗
      questionVisible: false
    }
  },
  computed: {
    ...mapState('questions', ['questionList','questionDatail']),
    ...mapState('subjects', ['subjectList', 'simpleList', 'tagList']),
  },
  methods: {
    ...mapActions('questions', ['updateQuestionList', 'updateQuestionDatail']),
    ...mapActions('subjects', ['updateSubjectList', 'updateSimpleList', 'updateTagList']),
    onCurrentPageChange(currentPage) {
      this.currentPage.page = currentPage
      this.updateQuestionList(this.currentPage)
    },
    onChangeSubject() {
      const data = this.questionFromData.subject
       this.updateSimpleList({
        subjectID: data
      });
      const tag = this.questionFromData.subject
      this.updateTagList({
        subjectID: data
      })
    },
    companyCity() {
      const data = citys(this.questionFromData.province)
      this.companyCitys = data
      this.companyFromData.city = this.companyCitys[0]
    },
    clearStatus() {
      this.questionFromData = {}
    },
    // 搜索
    onSearch() {
       this.updateQuestionList({
        subjectID: this.questionFromData.subject,
        ...this.currentPage,
       })
    },

    // 预览弹框
    async onViewClick(data) {
      this.questionVisible = true
      await  this.updateQuestionDatail({
        id: data.id
      })
      this.questionDatail.optionCodes = []
      this.questionDatail.optionCode = ''
      // 遍历选项并赋值
      for (const item of this.questionDatail.options) {
        if (item.isRight === 1) {
          this.questionDatail.optionCode = item.code
          this.questionDatail.optionCodes.push(item.code)
        }
      }
      this.questionFromData = this.questionDatail
    },
    onViewClose () {
      this.questionVisible = false
    },

    // 编辑
    onEditCompany(data) {
      // 跳转路由
      this.$router.push({
        path: 'new',
        query: {
          id: data.id
        }
      })
    },
    // 删除题目
    async onDelClick(data) {
      await delModule(questionApi.remove, '题目', {id: data.id})
      this.updateQuestionList()
    },
    // 加入精选
    onCheckClick(data) {
      this.$confirm('此操作将改题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '加入成功!'
        })
        questionApi.choiceAdd({
          id: data.id,
          choiceState: 1
        })
        this.updateQuestionList(this.currentPage)
      }).catch(() => {});
    },

    onChangeNewView() {
      this.$router.push('new')
    }


  },
  created() {
    this.updateQuestionList()
    this.updateSubjectList()
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin: 12px;
  .instructions{
    display: flex;
    justify-content: space-between;
    padding: 4px 20px 20px 8px;
    div{
      color: #ffc5d5;
      font-size: 12px;
    }
  }
  .counts {
    padding: 8px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    background-color: #f4f4f5;
    border-radius: 6px;
    color: #aaa;
  }
}
.el-form-item {
  display: inline-block !important;
}
.el-form-item__label {
  display: none;
  width: 0px !important;

}
.dialog-footer {
  display: flex;
  justify-content: right;
}
.question-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #aaa;
  div {
    margin:0 0 16px 0;
  }
}
.answer {
  margin: 8px 0;
}
.question-type {
  border-bottom: 1px solid #aaa;
}
.refer-answer {
  padding: 8px 0;
  border-bottom: 1px solid #aaa;
}
.answer-parsing {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #aaa;
   p {
    margin: 0;
   }

}

.note {
  margin: 8px 0 20px 0;
}


</style>
